import { Input, Row, Col, Form, Select } from 'antd';
import React, { useState, useEffect, memo } from 'react';
import '@ant-design/compatible/assets/index.css';
import styles from './AuditForms.less';
import router from 'umi/router';
import moment from 'moment';
import { connect } from 'dva';
const FormItem = Form.Item;
const { Option } = Select;

const BasisMesForm = (props) => {
  const { allDatas } = props;
  const [delayTime, setDelayTime] = useState(0) // 延误时长 分钟
  const [selected, setSelected] = useState(''); // 服务航站

  // 设置延误时长 和 服务航站的默认值
  useEffect(() => {
    let selectArea = allDatas.orgName;
    if (allDatas.ccode) {
      if (allDatas.org === allDatas.acode) { // 前半段
        selectArea = allDatas.aname;
      }else{
        selectArea = allDatas.bname;
      }
    }
    setSelected(selectArea);
    let minutes = 0;
    if (allDatas.etd && allDatas.std) {
      let a = moment(`${allDatas.flightDate} ${allDatas.etd}`);
      let b = moment(`${allDatas.flightDate} ${allDatas.std}`);
      minutes = Math.abs(a.diff(b, 'minute'));
    }else{
      minutes = 0;
    }
    setDelayTime(minutes || 0);
  }, [allDatas])

  // 服务航站的下拉数据 值为中文（不是三字码）
  let options = allDatas.cname ? [
    { title: allDatas.aname, value: allDatas.aname, },
    { title: allDatas.bname, value: allDatas.bname, },
    { title: allDatas.cname, value: allDatas.cname, },
  ]:[
    { title: allDatas.orgName, value: allDatas.orgName, },
    { title: allDatas.dstName, value: allDatas.dstName, },
  ];

  useEffect(() => {
    props.dispatch({
      type: 'auditDetail/changebaseData',
      payload: { baseData: { serviceTerminal: selected ? selected : allDatas.orgName, delayTime } }
    })
  }, [selected])

  const onChange = (value) => {
    setSelected(value);
  }

  return (
    <div className='formItems'>
      <Form >
        <Row gutter={16}>
          <Col md={6} sm={12}>
            <FormItem label='补偿类型：' >
              <Input value='不正常航班' disabled />
              {/* {allDatas.payType === '0' ?<Input value='不正常航班' disabled/>  : null}
                    {allDatas.payType === '1' ?<Input value='异常行李' disabled/>  : null}
                    {allDatas.payType === '2' ?<Input value='旅客超售' disabled/>  : null} */}
            </FormItem>
          </Col>
          <Col md={6} sm={12}>
            <FormItem label='补偿单号：'>
              <Input value={'-'} disabled />
            </FormItem>
          </Col>
          <Col md={6} sm={12}>
            <FormItem label='事故单号：'>
              <Input value={'-'} disabled />
            </FormItem>
          </Col>
          <Col md={6} sm={12}>
            <FormItem label='服务航站：'>
              <Select
                showSearch
                className='auto_H_W'
                placeholder="请选择服务航站"
                onChange={onChange}
                value={selected}
              >
                {options.map(item => (
                  <Option key={item.value + item.title} value={item.value}>{item.title}</Option>
                ))}
              </Select>
            </FormItem>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col md={6} sm={12}>
            <FormItem label='航班号：'>
              <Input value={allDatas.flightNumber} disabled />
            </FormItem>
          </Col>
          <Col md={6} sm={12}>
            <FormItem label='航班日期：'>
              <Input value={allDatas.flightDate} disabled />
            </FormItem>
          </Col>
          <Col md={12} sm={24}>
            <FormItem label='航段：' >
              <Input value={`${allDatas.orgName}-${allDatas.dstName}`} disabled />
            </FormItem>
          </Col>
        </Row>
        <Row gutter={16}>
          <Col md={6} sm={12}>
            <FormItem label='飞机号：'>
              <Input value={allDatas.planecode} disabled />
            </FormItem>
          </Col>
          <Col md={6} sm={12}>
            <FormItem label='预计起飞：'>
              <Input value={allDatas.etd} disabled />
            </FormItem>
          </Col>
          <Col md={6} sm={12}>
            <FormItem label='计划起飞：'>
              <Input value={allDatas.std} disabled />
            </FormItem>
          </Col>
          <Col md={6} sm={12}>
            <FormItem label='延误时长：'>
              <Input value={`${Math.round(delayTime / 60)} 小时`} disabled />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col md={24} sm={24}>
            <FormItem label='延误原因：'
            >
              <Input.TextArea value={allDatas.lateReason} rows={2} disabled />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
  )
}

/**
 * 优化渲染
 */
function carefulRender(prevProps, nextProps) {
  if (prevProps.allDatas.id != nextProps.allDatas.id) {
    return false
  } else {
    return true
  }
}


export default memo(connect(state => state.auditDetail)(BasisMesForm), carefulRender);
